<template>
  <div class="product">
    <!-- 标题title -->
    <div class="tip-title">{{title}}</div>
    <!-- 主体内容 -->
    <div class="content">
      <!-- 全选按钮 -->
      <div class="select-all">
        <w-checkbox :label="title" v-model="selectAll" @on-change="selectAllFn()">全选</w-checkbox>
        <span class="add" v-if="type == 1" @click="doGoodsList()">添加</span>
        <span class="add" v-if="type == 2" @click="doGoodsList()">取消</span>
      </div>
      <table>
        <thead>
          <tr>
            <th class="title checkbox-width"></th>
            <th class="title goods-width">商品</th>
            <!-- <th class="title mw70">所属店铺</th> -->
            <th class="title last-width">商品货号</th>
          </tr>
        </thead>
        <tbody v-if="type == 1">
          <tr v-for="(goods, index) in newList" :key="index">
            <td class="tc">
              <w-checkbox :label="`${type}${goods.id}`" :name="`${type}商品`" v-model="goods.isSelected"></w-checkbox>
            </td>
            <td class="pr">
              <img class="img" v-lazy="goods.goodsPath || goods.goodsImagePath" alt="">
              <span class="goods-name">{{goods.goodsName}}</span>
            </td>
            <!-- <td>{{goods.seller}}</td> -->
            <td>{{goods.goodsSerial || ''}}</td>
          </tr>
          <tr>
            <td v-if="!newList || newList.length == 0" colspan="4" class="pd10">您还没有商品哦！</td>
          </tr>
        </tbody>
        <tbody v-if="type == 2">
          <tr v-for="(goods, index) in newList" :key="index">
            <td class="tc">
              <w-checkbox :label="goods.id" v-model="goods.isSelected"></w-checkbox>
            </td>
            <td class="pr">
              <img class="img" v-lazy="goods.goodsPath || goods.goodsImagePath" alt="">
              <span class="goods-name">{{goods.goodsName}}</span>
            </td>
            <!-- <td>{{goods.seller}}</td> -->
            <td>{{goods.goodsSerial || ''}}</td>
          </tr>
          <tr>
            <td v-if="!newList || newList.length == 0" colspan="4" class="pd10">您还没有商品哦！</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    // 当前种类 1：添加商品 2：已选商品
    type: {
      type: [String, Number],
      default: 1
    },
    goodsList: {
      type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      returnGoodsList: [],
      selectAll: false
    }
  },
  computed: {
    /**
     * jonsArr数组去重
     */
    newList() {
      if (this.goodsList && this.goodsList.length) {
        var result = [this.goodsList[0]]
        for (var i = 1; i < this.goodsList.length; i++) {
          var item = this.goodsList[i]
          var repeat = false
          for (var j = 0; j < result.length; j++) {
            if (item.id == result[j].id) {
              repeat = true
              break
            }
          }
          if (!repeat) {
            result.push(item)
          }
        }
      }
      return result
    }
  },
  methods: {
    /**
     * 点击选择全部
     */
    selectAllFn() {
      // 如果待添加商品列表为空，则不操作
      if (!this.goodsList || this.goodsList.length == 0) {
        return
      }

      // 给全部商品列表赋值
      this.goodsList.forEach((v) => {
        v.isSelected = this.selectAll
      })
    },
    /**
     * 添加到已选商品列表或从已选清单中删除商品
     * PS: 根据当前的类型，如果type是1，则采用新增商品；如果type是2，则采用删除商品
     */
    doGoodsList() {
      // 先清空数据
      this.returnGoodsList = []

      // 让全选按钮不选中
      this.selectAll = false
      // 遍历数据，将选中的值取出，放到全局作用域中
      this.goodsList.forEach((v) => {
        // 如果当期是待选列表，则将选中的放到数组中
        if (this.type == 1 && v.isSelected) {
          // 不选中复选框
          v.isSelected = false

          // 将选中的放到返回数据中
          this.returnGoodsList.push(v)
        }

        // 如果当前是已选列表，则将未选中的放到数组中
        if (this.type == 2 && !v.isSelected) {
          this.returnGoodsList.push(v)
        }
      })
      // 待选商品中添加待选择的商品，但是没有选中商品
      if (this.returnGoodsList.length == 0 && this.type == 1) {
        this.$toast('请选择需要添加的商品')
        return
      }

      // 已选商品中取消待选择的商品，但是没有选中商品
      if (this.goodsList.length == this.returnGoodsList.length && this.type == 2) {
        this.$toast('请选择需要移除的商品')
        return
      }
      // 发送给父级
      if (this.type == 1) {
        this.$emit('selected-goods', this.returnGoodsList)
      } else {
        this.$emit('unselected-goods', this.returnGoodsList)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-width {
  width: 50px;
}
.last-width {
  width: 140px;
}
.goods-width {
  width: 208px;
}
.tc {
  text-align: center;
}
.pr {
  position: relative;
  text-align: left !important;
}
.img {
  background-color: #f5f5f5;
  display: inline-block;
  float: left;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 22px;
}
.mw70 {
  min-width: 70px;
}
.product {
  border: 1px solid #e6e6e6;

  .tip-title {
    background-color: #f2f2f2;
    border-bottom: 1px solid #d9d9d9;
    height: 42px;
    line-height: 42px;
    padding-left: 16px;
  }

  .content {
    .select-all {
      padding: 8px 40px;

      .add {
        color: #47bdf4;
        cursor: pointer;
        margin-left: 18px;
      }
    }
    
    table {
      width: 100%;

      .title {
        background-color: #fccde7;
        height: 42px;
      }
      
      tr {
        td {
          border-bottom: 1px solid #e0e0e0;
          padding: 36px 0px;
          text-align: center;

          .goods-name {
            display: inline-block;
            padding-left: 74px;
            text-align: left;
            line-height: 18px;
          }

          &.pd10 {
            padding: 10px;
          }
        }
        
        &:last-child {
          td {
            border-bottom: 0px;
          }
        }
      }
    }
  }
}
</style>